<template>
  <div
    ref="pdom"
    class="cam-box"
    v-show="_showed"
    :style="{
      position: 'fixed',
      left: position.x + 'px',
      top: position.y + 'px',
      zIndex: 9999,
    }"
    @mousedown="startDrag"
    @mouseup="stopDrag"
    @touchstart="startDrag"
    @mouseleave="stopDrag"
  >
    <div class="c-head">
      <label style="letter-spacing: 2px">{{ name }}</label>
      <div class="btn bclose" @click="call.stop()">Ｘ</div>
    </div>
    <div class="player">
      <ws-win ref="wsp" :realplay="realplay"></ws-win>
    </div>
  </div>
</template>

<script setup>
// 添加位置状态
const position = ref({ x: 800, y: 500 });
const isDragging = ref(false);
const dragOffset = ref({ x: 0, y: 0 });

// 开始拖拽
const startDrag = (event) => {
  // 只有点击头部区域才允许拖拽
  // if (!event.target.closest('.head')) return

  event.preventDefault();
  isDragging.value = true;

  const clientX = event.clientX || (event.touches && event.touches[0].clientX);
  const clientY = event.clientY || (event.touches && event.touches[0].clientY);

  dragOffset.value = {
    x: clientX - position.value.x,
    y: clientY - position.value.y,
  };

  document.addEventListener("mousemove", handleMouseMove);
  document.addEventListener("touchmove", handleTouchMove, { passive: false });

  // 防止拖拽时选中文本
  document.body.style.userSelect = "none";
  document.body.style.webkitUserSelect = "none";
  document.body.style.cursor = "move";
};
// 拖拽中
// 处理鼠标移动
const handleMouseMove = (event) => {
  if (!isDragging.value) return;

  event.preventDefault();
  event.stopPropagation();

  // 获取当前鼠标位置
  const clientX = event.clientX;
  const clientY = event.clientY;

  // 直接计算并更新位置
  position.value.x = clientX - dragOffset.value.x;
  position.value.y = clientY - dragOffset.value.y;
};

// 处理触摸移动
const handleTouchMove = (event) => {
  if (!isDragging.value || !event.touches || !event.touches[0]) return;

  event.preventDefault();

  // 使用 requestAnimationFrame 提升性能
  requestAnimationFrame(() => {
    // 获取当前触摸位置
    const clientX = event.touches[0].clientX;
    const clientY = event.touches[0].clientY;

    // 直接计算并更新位置
    position.value.x = clientX - dragOffset.value.x;
    position.value.y = clientY - dragOffset.value.y;
  });
};

// 停止拖拽
const stopDrag = (event) => {
  if (!isDragging.value) return;

  isDragging.value = false;

  // 移除事件监听
  document.removeEventListener("mousemove", handleMouseMove);
  document.removeEventListener("touchmove", handleTouchMove);

  // 恢复文本选择
  document.body.style.userSelect = "";
  document.body.style.webkitUserSelect = "";
  document.body.style.cursor = "";
};
// 命名的事件处理函数
const handleMouseUp = () => {
  stopDrag();
};

const handleTouchEnd = () => {
  stopDrag();
};
// 组件销毁前移除事件监听
onUnmounted(() => {
  // 清理可能残留的事件监听
  document.removeEventListener("mousemove", handleMouseMove);
  document.removeEventListener("touchmove", handleTouchMove);
  document.removeEventListener("mouseup", handleMouseUp);
  document.removeEventListener("touchend", handleTouchEnd);
});

import {
  onMounted,
  onUnmounted,
  nextTick,
  computed,
  reactive,
  watch,
  ref,
  toRefs,
} from "vue";

import wsWin from "./play.vue";

const emit =
    /*事件抛出
			//外层绑定@onFn="hOnFn"
		*/
    defineEmits(["onFn", "onOpenAudio"]),
  /*属性定义
			数据绑定v-bind:dat="dat"  
			const dat=ref({});
		*/
  props = defineProps({
    realplay: {
      type: String,
      default: null,
    }, //'ws://10.19.147.22:559/EUrl/q2jQie4';
    mode: {
      type: Number,
      default: 1,
    }, //0：普通模式，1:高级模式
  });

//播放句柄
const _showed = ref(false),
  name = ref("播放监控");

const pdom = ref(null),
  wsp = ref(null);
watch(_showed, (s) => {
  if (s) {
    pdom.value.style.transform = "translate(-50%, -50%)";
  }
});

watch(props, (pro) => {
  if (pro.realplay) {
    _showed.value = true;
  }
});

const call = {
  play: (ws, txt) => {
    _showed.value = true;
    name.value = txt;
    wsp.value.call?.play(ws);
  },
  stop: () => {
    _showed.value = false;
    wsp.value.call?.stop();
  },
};

//属性导出
//使用方法 ref="rdom" rdom.value.hFn()
defineExpose({
  call,
});

//触发
const hOnFn = (t) => {
  emit("onFn", t);
};

onUnmounted(() => {});
onMounted(() => nextTick(() => {}));
</script>

<style scoped lang="scss">
.cam-box {
  // 确保元素可以接收事件
  pointer-events: auto;
  position: absolute;
  width: 700px;
  height: 500px;
  z-index: 99999;
  top: 50%;
  left: 50%;
  color: #eee;
  font-size: 20px;
  background-size: 100% 100%;
  transform: translate(-50%, -50%);
  pointer-events: all;
  background-image: url(/imgs/cam/cwinbg.png);

  .c-head {
    width: calc(100% - 133px);
    font-size: 19px;
    font-family: "";
    top: 0;
    height: 30px;
    display: flex;
    color: #eee;
    background-color: #2d7049;
    z-index: 1;
    left: 30px;
    right: 20px;
    flex-direction: row;
    justify-content: space-between;
  }

  .bclose {
    height: 28px;
    width: 30px;
    background: rgba(30, 58, 88, 0.83);
    display: flex;
    justify-content: center;
    border: 1px solid #7e8795;
    // margin-right: 6px;
  }

  .bclose:hover {
    color: red;
    transform: scale(1.1);
    cursor: pointer;
  }

  .btn.b {
    font-size: 18px;
    position: absolute;
    width: calc(100% - 20px);
    height: 38px;
    right: 10px;
    bottom: 6px;

    line-height: 24px;

    background-image: url(/imgs/bg/btnb.png);
    background-size: 100% calc(100% + 2px);
    background-position: center;
    letter-spacing: 6px;
    color: #98e8fb;
    font-weight: bold;
  }

  .btn.b:hover {
    color: #04ff00;
  }

  label {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 1px;
    margin: 0 auto;
  }
}

.player {
  width: calc(100% - 133px);
  height: calc(100% - 170px);
  /* margin: 130px auto; */
  background-color: #222;
}
</style>
